<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增' : '编辑'"
             width="700px">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
      <el-form-item label="排序号">
        <el-input-number v-model.number="form.ord" :min="1" :max="999" style="width: 470px;" controls-position="right"/>
      </el-form-item>
      <el-form-item label="类型" class="dd-label" prop="type">
        <el-select v-model="form.type" style="width: 470px" placeholder="请选择类型">
          <el-option v-for="item in typeInfo" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否展示">
        <el-switch
          v-model="statusTemp"
          active-text="是"
          inactive-text="否">
        </el-switch>
      </el-form-item>
      <!-- <el-form-item label="备注信息">
        <el-input v-model="form.remark" maxlength="20" style="width: 470px;"/>
      </el-form-item> -->
      <el-form-item label="轮播图" prop="imageUrl">
        <el-upload
          class="avatar-uploader"
          :action="fileUploadUrl"
          accept=".jpg,.jpeg,.png"
          :show-file-list="false"
          :on-success="handleSuccess"
          :before-upload="beforeUpload">
          <img v-if="coverImg" :src="coverImg" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { add } from '@/api/business/banner'

  export default {
    props: {
      isAdd: {
        type: Boolean,
        required: true
      }
    },
    data() {
      return {
        loading: false,
        dialog: false,
        fileUploadUrl: process.env.FILE_UPLOAD,
        coverImg: null,
        objCoverImg: [],
        statusTemp:true,
        typeInfo: [
          { value: "PC", label: 'PC端' },
          { value: "APP", label: 'APP端' }
        ],
        form: {
          id: null,
          imageUrl: '',
          remark: '',
          status: 1,
          ord: 1
        },
        rules: {
          imageUrl: [
            { required: true, message: '请上传轮播图', trigger: 'change' }
          ],
          type: [
            { required: true, message: '请选择类型', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      cancel() {
        this.dialog = false
        this.coverImg = null
        this.form = {
          id: null,
          imageUrl: '',
          remark: '',
          status: 1,
          ord: 1
        }
      },
      doSubmit() {
        this.form.status=this.statusTemp?1:0;
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.doAdd()
          }
        })
      },
      doAdd() {
        add(this.form).then(res => {
          this.$notify({
            title: '操作成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
          this.$parent.init()
          this.cancel()
        }).catch(err => {
          this.loading = false
          console.log(err)
        })
      },
      beforeUpload(file) {
        var imgfileType="'image/jpeg','image/jpg','image/pjpeg','image/x-png','image/png'";
        const isJPG =imgfileType.indexOf(file.type )>0;
        if (!isJPG) {
          this.$message.error('上传图片只能是 jpg、png、jpeg 格式!')
          return false;
        }
      },
      handleSuccess(response, file, fileList) {
        this.objCoverImg = []
        const uploadFile = {
          name: file.name,
          url: file.response
        }
        this.coverImg = uploadFile.url
        this.objCoverImg.push(uploadFile)
        this.form.imageUrl = JSON.stringify(this.objCoverImg)
        this.$refs.form.validateField('imageUrl')

      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 470px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 470px;
    height: 178px;
    display: block;
  }

  .el-dialog-div {
    height: 55vh;
    overflow-x: hidden;
  }
</style>
